<template>
    <el-dialog :title="detailData.plate_no" :visible.sync="outerVisible" width="900px" append-to-body>
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">
                <div class="flex-sub margin-right flex flex-direction">
                    <vehicle-info :detail-data="detailData" />

                    <div class="flex  margin-top-sm">
                        <el-button size="small" type="primary" icon="el-icon-edit" style="width: 120px;" @click="handleEdit">编辑</el-button>
                        <!--                        <el-button size="small" type="success" icon="el-icon-video-camera" style="width: 120px;">预检视频</el-button>-->
                        <el-button size="small" type="danger" icon="el-icon-user-solid" style="width: 120px;" @click="handleAddBlack">加入黑名单</el-button>
                    </div>
                </div>

                <vehicle-media :detail-data="detailData" :show-video="showVideo" style="width: 50%;" />
            </div>

            <el-tabs v-model="queryParams.Parameter" class="margin-top-xs " @tab-click="handleTabClick">
                <el-tab-pane label="24小时内超限数据" name="1" />
                <el-tab-pane label="7日内超限数据" name="2" />
                <el-tab-pane label="30天内超限数据" name="3" />
            </el-tabs>

            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData" size="mini"
                      header-cell-class-name="table-header" style="width: 100%; margin-top: -15px;" max-height="200">
                <el-table-column label="车牌号码" width="100" prop="plate_no" />
                <el-table-column label="检测站点" width="180" prop="name" />
                <el-table-column label="过车时间" width="200">
                    <template slot-scope="scope">
                        {{ moment(scope.row.pass_time).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="车辆重量（吨）" width="150" prop="vehicle_weight" />
                <el-table-column label="超重（吨）" width="100" prop="over_weight" />
                <el-table-column label="操作" width="120" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <vehicle-edit ref="vehicle-edit" :init-data="detailData" />
        <black-dialog ref="black-dialog" @close="handleDialogClosed" />
    </el-dialog>
</template>

<script>
import moment from 'moment';
import VehicleEdit from './vehicle-edit';
import VehicleInfo from './vehicle-info';
import VehicleMedia from './vehicle-media';
// import BlackDialog from '../../black-list/black-dialog';

// import {OutOfLimitData} from '@/api/informationApi';

export default {
    name: 'VehicleDetail',
    components: {VehicleEdit, VehicleInfo, VehicleMedia},
        // , BlackDialog},
    props: {
        initDetailData: Object,
        showVideo: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            outerVisible: false,
            tableData: [],
            totalCount: 0,
            isLoading: false,
            queryParams: {},
            detailLoading: false,
            localVehicleDetail: null,
            mediaTab: 'img'
        };
    },
    computed: {
        images() {
            console.log(this.detailData);
            let images = this.detailData.image_path;
            if (images) {
                return images.split(',');
            }
            return [];
        },
        detailData() {
            return this.localVehicleDetail || this.initDetailData;
        }
    },
    watch: {
        initDetailData(val) {
            this.localVehicleDetail = null;
            this.queryParams = {
                Parameter: '1',
                CurrentPage: 1,
                plate_no: val.plate_no
            };
            this.mediaTab = 'img';
            this.loadRemoteData();
        }
    },
    mounted() {

    },
    methods: {
        moment,
        show() {
            this.outerVisible = true;
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.loadRemoteData();
        },
        handleTabClick() {
            this.queryParams.CurrentPage = 1;
            this.loadRemoteData();
        },
        handleView(item) {
            this.detailLoading = true;

            setTimeout(() => {
                this.localVehicleDetail = item;
                this.detailLoading = false;
            }, 100);

        },
        loadRemoteData() {
            this.isLoading = true;
            OutOfLimitData(this.queryParams).then(res => {
                this.isLoading = false;
                console.log(res);
                this.tableData = res.res.OutOfLimitData;
                if (this.tableData && this.tableData.length > 0) {
                    this.totalCount = this.tableData[0].totalCount;
                }

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleEdit() {
            this.$refs['vehicle-edit'].show();
        },
        handleAddBlack() {
            this.$refs['black-dialog'].show({
                plate_info: this.detailData.plate_no,
                plate_color: this.detailData.plate_color,
                plate_color_name: this.detailData.plate_color_name,
                readonly: true
            });
        },
        handleDialogClosed() {

        }
    }
};
</script>

<style scoped>

/deep/
.el-dialog__body {
    padding: 10px 20px;
}
/deep/
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #dcdfe6;
}

</style>
